<template>
  <div >
    <form-head @onSubmit="onSubmit" :is_change="is_change"/>
    <el-form ref="form" :rules="rules" :model="form" label-width="100px" class="layout-all form-width">
      <el-form-item label="社区名称:" prop="title">
        <el-input
          v-model="form.title"
          placeholder="请输入社区名称"
        />
      </el-form-item>
      <el-form-item label="团长姓名:" prop="team_title">
        <el-input
          v-model="form.team_title"
          placeholder="请输入团长姓名"
        />
      </el-form-item>
      <el-form-item label="团长电话:" prop="team_phone">
        <el-input
          v-model="form.team_phone"
          placeholder="请输入团长电话"
        />
      </el-form-item>
      <el-form-item label="指定用户:" prop="user_id">
        <el-select
          v-model="form.user_id"
          clearable
          filterable
          placeholder="请选择用户"
        >
          <el-option
            v-for="item in user_list"
            :key="item.id"
            :label="item.nickname"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="分润百分比:" prop="divide_ratio">
        <el-input
          v-model="form.divide_ratio"
          placeholder="请输入分润百分比"
        />
      </el-form-item>
      </el-form-item>
      <el-form-item label="收货人:" prop="consignee">
        <el-input
          v-model="form.consignee"
          placeholder="请输入收货人"
        />
      </el-form-item>
      <el-form-item label="收货手机号:" prop="mobile">
        <el-input
          v-model="form.mobile"
          placeholder="请输入收货手机号"
        />
      </el-form-item>
      <el-form-item label="省份:" prop="province_id">
        <el-select
          v-model="form.province_id"
          clearable
          placeholder="请选择省份"
          @change="onGetCity"
          filterable
        >
          <el-option
            v-for="item in province"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="城市:" prop="city_id">
        <el-select
          v-model="form.city_id"
          clearable
          placeholder="请选择城市"
          @change="onGetregion"
          filterable
        >
          <el-option
            v-for="item in city"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="地区:" prop="district_id">
        <el-select
          v-model="form.district_id"
          clearable
          placeholder="请选择地区"
          filterable
        >
          <el-option
            v-for="item in region"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="地址:" prop="address">
        <el-input
          v-model="form.address"
          placeholder="请输入地址"/>
          <!-- <el-button type="primary"  @click="open">地图选址</el-button> -->
      </el-form-item>
      <el-form-item label="经度:" prop="lng">
        <el-input
          v-model="form.lng"
          placeholder="请输入经度"
        />
      </el-form-item>
      <el-form-item label="纬度:" prop="lat">
        <el-input
          v-model="form.lat"
          placeholder="请输入纬度"
        />
      </el-form-item>
      <el-form-item label="登陆密码:" prop="pwd">
        <el-input
          v-model="form.pwd"
          placeholder="登陆密码"
        />
      </el-form-item>
      <el-form-item label="是否启用:" prop="status">
        <el-switch
          v-model="form.status"
          active-color="#13ce66"
          inactive-color="#ff4949"
        />
      </el-form-item>
    </el-form>
  </div>
</template>

<script>

  // window.addEventListener('message', function(event) {
  //     // 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
  //     var loc = event.data;
  //     if (loc && loc.module == 'locationPicker') {//防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
  //       console.log('location', loc);
  //       this.upStationLocation = loc
  //       console.log(this.departure_station)
  //       // this.departure_station[0].title = this.upStationLocation.poiname
  //       document.getElementById("rar").value = loc.poiname;
  //       document.getElementById("rarlat").value = loc.latlng.lat;
  //       document.getElementById("rarlng").value = loc.latlng.lng;
  //       // console.log('this.upStationLocationthis.upStationLocationthis.upStationLocation')
  //       // console.log(this.upStationLocation)
  //       // this.showUp(loc)
  //     }
  //   }, false);

export default {
  name:"community_buy_form",
  data() {
    return {
      id: 0,
      is_change: undefined,
      user_list: [],
      province: [],
      city: [],
      region: [],
      form: {},
      upStationLocation: {
        cityname: "",
        latlng:{
          lat: 45.707741,
          lng: 126.66284
        },
        module: "",
        poiaddress: "",
        poiname: "",
      },
      rules: {
        title: [{ required: true, message: "请输入社区名称", trigger: "blur" }],
        team_title: [
          { required: true, message: "请输入团长姓名", trigger: "blur" },
        ],
        team_phone: [
          { required: true, message: "请输入团长电话", trigger: "blur" },
        ],
        user_id: [
          { required: true, message: "请选择指定用户", trigger: "blur" },
        ],
        divide_ratio: [
          { required: true, message: "请输入分润百分比", trigger: "blur" },
        ],
        mobile: [
          { required: true, message: "请输入手机", trigger: "blur" },
        ],
        consignee: [
          { required: true, message: "请输入收货人", trigger: "blur" },
        ],
        address: [{ required: true, message: "请输入地址", trigger: "blur" }],
        lng: [{ required: true, message: "请输入经度", trigger: "blur" }],
        lat: [{ required: true, message: "请输入纬度", trigger: "blur" }],
        province_id: [
          { required: true, message: "请选择省份", trigger: "blur" },
        ],
        city_id: [{ required: true, message: "请选择城市", trigger: "blur" }],
        district_id: [
          { required: true, message: "请选择地区", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    this.id = (this.$route.params && this.$route.params.id)||0
    this.$setTagsViewTitle(this.id)
    this.onGetprovince(0);
    this.init_into();
  },
  methods: {
      open() {
      this.$alert('<iframe id="mapPage" width="100%" height="800px" frameborder=0 src="https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=OGHBZ-J7EKD-F2M4C-PYR5X-QQHQF-FVB25&referer=myapp"> </iframe>', '选择地点', {
        dangerouslyUseHTMLString: true
      }).then(() => {
            this.$message({
              type: 'info',
              message: '保存修改'
            });
            if(document.getElementById('rar').value != '' && document.getElementById('rar').value != '我的位置') {
              this.form.address = document.getElementById('rar').value
            }
            if(document.getElementById('rarlat').value != '') {
              this.form.lat = document.getElementById('rarlat').value
            }
            if(document.getElementById('rarlng').value != '') {
              this.form.lng = document.getElementById('rarlng').value
            }
            
            document.getElementById('rar').value = ''
            document.getElementById('rarlat').value = ''
            document.getElementById('rarlng').value = ''
          })
          .catch(action => {
            this.$message({
              type: 'info',
              message: action === 'cancel'
                ? '放弃保存并离开页面'
                : '停留在当前页面'
            })
            if(document.getElementById('rar').value != '' && document.getElementById('rar').value != '我的位置') {
              this.form.address = document.getElementById('rar').value
            }
            if(document.getElementById('rarlat').value != '') {
              this.form.lat = document.getElementById('rarlat').value
            }
            if(document.getElementById('rarlng').value != '') {
              this.form.lng = document.getElementById('rarlng').value
            }
            document.getElementById('rar').value = ''
            document.getElementById('rarlat').value = ''
            document.getElementById('rarlng').value = ''
          });
      // this.$alert('<strong>这是 <i>HTML</i> 片段</strong>', 'HTML 片段', {
      //   dangerouslyUseHTMLString: true
      // });
    },
    // 省份
    onGetprovince(id) {
      this.get("/pub/Common/get_region", { parent_id: id }, "POST").then(
        (e) => {
          this.province = e.list;
        }
      );
    },
    // 城市
    onGetCity(id) {
      this.get("/pub/Common/get_region", { parent_id: id }, "POST").then(
        (e) => {
          this.city = e.list;
        }
      );
    },
    //地区
    onGetregion(id) {
      this.get("/pub/Common/get_region", { parent_id: id }, "POST").then(
        (e) => {
          this.region = e.list;
        }
      );
    },
    // 提交
    onSubmit(formName) {
      const form = this.form;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          form.id = this.id;
          form.status === true ? (form.status = 1) : (form.status = 0);
          this.get("/admin/CommunityTeam/save", form, "POST").then((e) => {
            this.$msg_ok("success", "保存成功");
            this.$back();
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
      console.log("submit!");
    },
    // 返回
    bk() {
      this.$router.back();
    },
    // 获取当前数据
    init_into() {
      this.get("/admin/CommunityTeam/info?id=" + this.id, "POST").then((e) => {
        this.form = e.info.tpl;
        this.user_list = e.user_list;
        if (this.id > 0) {
          this.form.status=this.form.status==1
          this.onGetCity(this.form.province_id);
          this.onGetregion(this.form.city_id);
        } else {
          this.form.status=true
          this.form.province_id = 1;
          this.onGetCity(1)
          this.form.city_id = 2
          this.onGetregion(2)
          this.form.district_id = 3;
        }
        setTimeout(()=>{this.is_change=false},100)
      });
    },
  },
  watch: {
    form:{
      handler (val, oldVal) {
        if(this.is_change!=undefined)
        this.is_change=true
      },
      deep:true
    }
  }
};
</script>

<style>
.layout-all {
  margin: 10px;
}
</style>
